<template>
  <div>
    <navs></navs>
    <!-- 分类 -->
    <div id="shoppingList">
      <div class="title">
        <h2>男士</h2>
        <div class="species">
          <router-link to="" v-for="(item,index) in list" :key="index">
            {{item.classification}}
          </router-link>
        </div>
      </div>
      <div class="product">
        <p>
          ECCO爱步男士鞋款以优质皮革材料和符合人体工学的鞋楦设计,为您带来舒适的穿着体验。ECCO男鞋款式为您提供从正装到休闲的不同选择。
        </p>
      </div>
    </div>
    <!-- 选择-->
    <div class="shoppingChoose">
      <ul class="screening">
        <li v-for="(item,index) in inf" :key="item.id" class="screenList"
            @mouseover="handleToggle(index)" @mouseleave="handleHidden()">
        <span>
<!--          导航-->
          {{ item.title}}
          <!--          <img src="../assets/images/down.png" alt="">-->

          <span class="rightList"><img  :src="item.img" alt=""></span>
        </span>
          <!--        小列表-->
          <div class="smallList" v-show="data.currentIndex === index">
            <ul v-show="data.currentIndex1!=index" >
              <li v-for="(item1,index1) in item.onescreen" :key="index1" class="aaa">
                <span> <input type="checkbox"></span>{{ item1 }}
              </li>
            </ul>
            <ul v-show="data.currentIndex1==index" class="bigSize">
              <li >
                <div class="buttonSize">
                  <span @click="EU"  :class="{'switch':data.flag}">EU</span>
                  <span @click="CN" :class="{'switch':!data.flag}">CN</span>
                </div>
                <div class="sizeList">
                  <ul v-for="(item2,index2) in item.euSize" :key="index2" v-show="data.flag">
                    <li @click="handoff(index2)" :class="{switch: data.control==index2}">{{item2}}</li>
                  </ul>
                  <ul v-for="(item2,index2) in item.cnSize" :key="index2" v-show="!data.flag">
                    <li @click="handoff(index2)" :class="{switch: data.control==index2}">{{item2}}</li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <span class="all">显示全部</span>
        </li>
      </ul>
    </div>
    <!-- 内容-->
    <div class="shoppingcontent">
      <div class="list"  v-for="(item, index) in info" :key="index">
        <div v-show="data.listIndex!=index" class="images">
          <!--      //黄景瑜同款-->
          <div class="same">
            <span>{{ item.same }}</span>
          </div>
          <!--      //大图-->
          <div class="picture">
            <router-link to="/details">
              <img :src="item .img" alt="" class="bigImg">
            </router-link>
          </div>
          <router-link to="">
            <p class="introduce">{{item.introduce}}</p>
          </router-link>
          <p class="price">
            <!--        //实际价格-->
            <span>￥{{ item.real }}</span>&nbsp;
            <!--        //划掉的价格-->
            <span class="cross">￥{{item.cross}}</span>
          </p>
          <!--      //浏览分类的鞋（小图）-->
          <div class="small" >
            <router-link to="" v-for="(item1,index1) in item.url" :key="index1">
              <img :src="item1" alt="" class="smallImg" @mouseenter="handleMouseEnter(index,index1)">
            </router-link>
            <router-link to="" class="number">{{item.num}}</router-link>
          </div >
          <!--      //按钮-->
          <div class="button">
            <router-link to="/shoppinglist/quicktour">
              <button>{{ item.button }}</button>
            </router-link>
          </div>
        </div >


        <div v-show="data.listIndex==index" class="images">
          <!--      //图片-->
          <div class="picture">
            <router-link to="" >
              <img :src="item.img" alt="" class="bigImg">
            </router-link>
          </div>
        </div>


      </div>
    </div>
    <div class="shoppingroading">
      <button>
        <span>加载更多</span>
      </button>
    </div>
    <footers></footers>
    <router-view></router-view>
    <router-view></router-view>
  </div>

</template>

<script setup>
import navs from "../components/Nav.vue"
import footers from "../components/Footer.vue"
import {ref,reactive} from 'vue';
import $ from 'jquery';
const data=reactive({
  num:1,
  currentIndex:-1,
  currentIndex1:2,
  listIndex:2,
  isShow:false,
  login:false,
  flag:true,
  control: -1,
})

/*分类*/
const list=reactive([
  {classification:"休闲鞋"},
  {classification:"正装鞋"},
  {classification:"靴子/高帮鞋"},
  {classification:"凉鞋"},
])

/*选择*/
const inf=reactive([
  {
    id:1,
    title:"性别",
    onescreen:['男士'],
    img: "../../public/images/shoppingList/down.png",
  },
  {
    id:2,
    title:"价格",
    onescreen:['￥800-￥999','￥800-￥999','￥800-￥999','￥800-￥999','￥800-￥999','￥800-￥999'],
    img: "../../public/images/shoppingList/down.png",
  },
  {
    id:3,
    title:"尺码",
    onescreen:[

    ],
    euSize:['39','40','41','42','43','44',],
    cnSize:['391','401','411','421','431','441',],
    img: "../../public/images/shoppingList/down.png",
  },
  {
    id:4,
    title:"皮革",
    onescreen:['牛皮', '羊皮', '小牛皮', '小牛皮/牛翻毛皮', '牛皮革','牛皮革/纺织品','牛皮剖层革/牛皮革','牛皮革/牛皮剖层革','牛皮革/牛皮革'],
    img: "../../public/images/shoppingList/down.png",
  },
])

/*内容*/
const info=reactive([
  {
    same: "黄景瑜同款",
    img: "../../public/images/shoppingList/1.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/1.jpg",
          "../../public/images/shoppingList/2.jpg",
          "../../public/images/shoppingList/3.jpg",
          "../../public/images/shoppingList/4.jpg",
    ],
    num:"+2",
    button: "快速浏览",
  },
  {
    same: "黄景瑜同款",
    img: "../../public/images/shoppingList/4.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/4.jpg",
      "../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/1.jpg",
    ],
    num:"+2",
    button: "快速浏览",
  },
  {img: "../../public/images/shoppingList/bigman.jpg",},
  {
    same: "NEW",
    img: "../../public/images/shoppingList/3.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/1.jpg",
      "../../public/images/shoppingList/4.jpg",
    ],

    num:"+2",
    button: "快速浏览",
  },
  {
    same: "NEW",
    img: "../../public/images/shoppingList/1.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/1.jpg",
      "../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/4.jpg",
    ],

    num:"+2",
    button: "快速浏览",
  },
  {
    same: "NEW",
    img: "../../public/images/shoppingList/1.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/1.jpg",
      "../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/4.jpg",
    ],

    num:"+2",
    button: "快速浏览",
  },
  {
    same: "NEW",
    img: "../../public/images/shoppingList/1.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/1.jpg",
      "../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/4.jpg",
    ],

    num:"+2",
    button: "快速浏览",
  },
  {
    same: "NEW",
    img: "../../public/images/shoppingList/2.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/1.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/4.jpg",
    ],

    num:"+2",
    button: "快速浏览",
  },
  {
    same: "NEW",
    img: "../../public/images/shoppingList/2.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/1.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/4.jpg",
    ],

    num:"+2",
    button: "快速浏览",
  },
  {
    same: "NEW",
    img: "../../public/images/shoppingList/2.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/1.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/4.jpg",
    ],

    num:"+2",
    button: "快速浏览",
  },
  {
    same: "NEW",
    img: "../../public/images/shoppingList/2.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/1.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/4.jpg",
    ],

    num:"+2",
    button: "快速浏览",
  },
  {
    same: "NEW",
    img: "../../public/images/shoppingList/2.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/1.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/4.jpg",
    ],

    num:"+2",
    button: "快速浏览",
  },
  {
    same: "黄景瑜同款",
    img: "../../public/images/shoppingList/4.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/4.jpg",
      "../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/1.jpg",
    ],
    num:"+2",
    button: "快速浏览",
  },
  {
    same: "黄景瑜同款",
    img: "../../public/images/shoppingList/4.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/4.jpg",
      "../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/1.jpg",
    ],
    num:"+2",
    button: "快速浏览",
  },
  {
    same: "黄景瑜同款",
    img: "../../public/images/shoppingList/4.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/4.jpg",
      "../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/1.jpg",
    ],
    num:"+2",
    button: "快速浏览",
  },
  {
    same: "黄景瑜同款",
    img: "../../public/images/shoppingList/4.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/4.jpg",
      "../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/1.jpg",
    ],
    num:"+2",
    button: "快速浏览",
  },
  {
    same: "NEW",
    img: "../../public/images/shoppingList/2.jpg",
    introduce: "ECCO街头720系列男士休闲鞋",
    real: 1929,
    cross: 2399,
    url: ["../../public/images/shoppingList/2.jpg",
      "../../public/images/shoppingList/1.jpg",
      "../../public/images/shoppingList/3.jpg",
      "../../public/images/shoppingList/4.jpg",
    ],

    num:"+2",
    button: "快速浏览",
  },



])

function  handleMouseEnter(index,index1){
  info[index].img=info[index].url[index1]
}
function CN(){
  console.log(data.flag)
  data.flag=false
}
function EU(){
  console.log(data.flag)
  data.flag=true
}
function handoff(index){
  data.control = index;
}
console.log(inf[2].euSize)
const handleToggle = (index) => {
  data.currentIndex = index
  $(".smallList").eq(index).stop().slideDown()
}
const handleHidden = () => {
  data.currentIndex = -1
}
// const loops

</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a,li{
    list-style: none;
    text-decoration: none;
}
#shoppingList{
    background: #000;
    height: 16.25rem;
    margin-top: 3.75rem;
    padding: 1.25rem;
    display: flex;
    margin: 0 auto;
    margin-top: 4rem;
}
/*标题*/
#shoppingList .title{
    width: 60%;
}
#shoppingList .title h2{
    color: #fff;
    font-size: 3.125rem;
    font-family: "宋体";
}
#shoppingList .product {
    width: 40%;
    align-self: center;
}
#shoppingList .product p{
    color: #fff;
    font-size: 1.25rem;
}
/*分类*/
#shoppingList .species{
    display: flex;
    margin-top: 6.25rem;
}
#shoppingList .species a{
    margin-right: 1.5625rem;
    border: 0.0625rem solid #fff;
    padding: 0.1875rem 0.9375rem;
    line-height: 1.875rem;
    color: #fff;
    cursor: pointer;
}

/*选择*/
.shoppingChoose{
    background: #878787;
    height: 3.75rem;
    line-height: 3.75rem;
}
.shoppingChoose .screening{
    display: flex;
    margin: 0 1.25rem;
}
.shoppingChoose .screenList{
    width: 15%;
    cursor: pointer;
}
/*方向图标*/
.shoppingChoose .rightList{
    align-items: center;
    vertical-align: -webkit-baseline-middle;
}
.shoppingChoose .rightList  img{
    width: 1.7rem;
}
.shoppingChoose .smallList{
    position: absolute;
    border-radius:0.2rem;
    box-shadow: 0 0 0.4rem gainsboro;
    background-color:white ;
    z-index: 9;
    line-height: 1.875rem;
    vertical-align: middle;
}
.shoppingChoose .aaa{
    width: 100%;
    padding: 0 1.875rem 0 0;
}
.shoppingChoose .smallList input{
    zoom: 1.5;
    margin: 0.625rem;
}
/*EU CN按钮*/
.shoppingChoose .buttonSize{
    display: flex;
}

.shoppingChoose .buttonSize span{
    display: inline-block;
    border: 0.0625rem solid #ccc;
    width: 4.375rem;
    line-height: 2.1875rem;
    text-align: center;
    font-size: 0.875rem;
    margin:1.25rem 0.625rem 0 0.625rem;
}
/*尺码表*/
.shoppingChoose .sizeList{
    display: flex;
    justify-content: space-between;
    margin: 1.25rem 0.625rem 1.25rem 0;
    width: 25%;
}
.shoppingChoose .sizeList li{
    border: 0.0625rem solid #000;
    width: 2.75rem;
    line-height: 2.1875rem;
    text-align: center;
    margin-right: 0.3125rem;
    font-size: 0.75rem;
}
.shoppingChoose .sizeList{
    width: 20%;
}

/*切换*/
.shoppingChoose .switch{
    background: #000;
    color: white;
}
/*分类span宽度*/
/*分类导航*/


/*!*选中框*!*/

/*!*排序箭头*!*/

/*!*方向图标**/
.shoppingChoose .rightList :hover{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}
.shoppingChoose .iconEnter img{
    margin: 0 auto;
    display: block;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}


/*点击显示隐藏（显示全部）*/
.shoppingChoose .all{
    display: none;
}
/*//内容*/
.shoppingcontent{
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
}
.shoppingcontent .list{
    width: 25%;
    border-right: 0.0625rem solid #000;
    border-bottom: 0.0625rem solid #000;
    border-left: 0.0625rem solid #000;
    padding: 1.25rem 2.5rem 1.25rem 2.5rem;
}
.shoppingcontent .list:hover{
    box-shadow: 0 0 10px gray;
}
.shoppingcontent .list:nth-child(3){
    padding: 0;
    /*width: 501px;*/
}
.shoppingcontent .list:nth-child(3) img{
    width: 100%;
    height: 29.825rem;
    margin-top: 0;
    display: block;
}
.shoppingcontent .images{
    box-sizing: border-box;
}
.shoppingcontent .same{
    position: relative;
    /*margin-bottom: -5px;*/
    /*margin-top: 5px;*/
}
.shoppingcontent .same span{
    font-size: 1rem;
    position: absolute;
}
.shoppingcontent .same:before{
    content: "";
    width: 2.8125rem;
    height: 2.5rem;
    left: -1.125rem;
    top: -0.3125rem;
}
.shoppingcontent .same:before{
    background: #e9e4ea;
    position: absolute;
    z-index: 0;
}
.shoppingcontent .picture a img{
    width: 100%;
    margin-top: -0.625rem;
    /*width: 414px;*/
    text-align: center;
    font-size: 1rem;
}
/*介绍*/
.shoppingcontent .introduce{
    margin-top: -0.625rem;
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: #000;
}
/*价格*/
.shoppingcontent .price{
    text-align: center;
    font-size: 0.9375rem;
    color: #000;
    margin: 0.625rem 0;
}
.shoppingcontent .price .cross{
    text-decoration: line-through;
    color: #999;
}
/*小图*/
.shoppingcontent .small{
    text-align: center;
}
.shoppingcontent .smallImg{
    margin-right: 0.625rem;
    width: 1.625rem;

}
.shoppingcontent .listImg{
    border: 0.0625rem solid #000;
    border-radius: 50%;
}
.shoppingcontent .number{
    position: absolute;
}
.shoppingcontent .current{
    display: block;
}
/*按钮*/
.shoppingcontent .button{
    text-align: center;
    margin-top: 0.625rem;
}
.shoppingcontent .button button{
    cursor: pointer;
    line-height: 2.75rem;
    font-size: 1rem;
    color: white;
    padding: 0 2.625rem;
    transform: scale(1);
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    opacity: 0;
}
.shoppingcontent .button button:hover{
    background-color: #000;
    color: white;
    transform: scale(1);
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    opacity: 1;
}
.shoppingcontent .list:hover .small {
    opacity: 1;
}
.shoppingcontent .list:hover .button  button {
    opacity: 2;
    background-color: #000;
    color: white;
    transform: scale(1);
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
/*加载更多*/
.shoppingroading{
    text-align: center;
    margin: 3.125rem 37.125rem;
}
 .shoppingroading button{
    cursor: pointer;
    width: 20.625rem;
    height: 3.125rem;
    line-height: 3.125rem;
    background: #000;
    text-align: center;
}
.shoppingroading button span{
    color: white;
    text-align: center;
    font-size: 1rem;
}
.shoppingroading button:hover{
    background: #333333;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}




</style>

